
<div class="w-100 d-flex flex-column h-100" id="tree">

  <!-- Tree section -->
  <div class="max-height panel-1">

    <mat-accordion
      displayMode="flat"
      multi
      #container
      class="h-100">

      <mat-expansion-panel
        expanded
        class="mat-elevation-z0 mt-2">

        <mat-expansion-panel-header class="ps-0 pe-1">
          <mat-panel-title>
            <div class="d-flex justify-content-between align-items-center w-100">

              <p class="my-0 fw-bold text-nowrap w-100">All files</p>

              <div
                class="ps-3 d-flex justify-content-end align-items-center action-menu-general"
                (click)="$event.stopPropagation()">

                <button
                  mat-icon-button
                  color="primary"
                  class="tree-action-btn"
                  title="Get OpenAPI specification ..."
                  (click)="getOpenAPISpecification()">
                  <mat-icon>http</mat-icon>
                </button>

                <button
                  mat-icon-button
                  color="primary"
                  class="tree-action-btn"
                  title="New file ..."
                  (click)="createNewFileObject('file')">
                  <mat-icon>post_add</mat-icon>
                </button>

                <button
                  mat-icon-button
                  color="primary"
                  class="tree-action-btn"
                  title="New folder ..."
                  (click)="createNewFileObject('folder')">
                  <mat-icon>create_new_folder</mat-icon>
                </button>

                <button
                  mat-icon-button
                  color="primary"
                  class="tree-action-btn"
                  [title]="currentFileData && currentSelection === 'file' ? 'Download file...' : 'Download folder...'"
                  (click)="currentFileData && currentSelection === 'file' ? downloadActiveFile(currentFileData.path) : downloadFolder()">
                  <mat-icon>file_download</mat-icon>
                </button>

                <button
                  mat-icon-button
                  color="primary"
                  class="tree-action-btn"
                  title="Upload file ..."
                  (click)="file.click()">
                  <mat-icon>file_upload</mat-icon>
                </button>

                <button
                  mat-icon-button
                  color="primary"
                  class="tree-action-btn"
                  title="Install module ..."
                  (click)="zipfile.click()">
                  <mat-icon>drive_folder_upload</mat-icon>
                </button>

              </div>
            </div>
          </mat-panel-title>
        </mat-expansion-panel-header>

        <mat-tree
          [dataSource]="dataSource"
          [treeControl]="treeControl">

          <!-- Tree nodes for files -->
          <mat-tree-node
            *matTreeNodeDef="let file"
            matTreeNodePadding
            matTreeNodePaddingIndent="10"
            [class.text-danger]="file.node.systemFile"
            [class.active-file]="currentFileData?.path === file.node.path"
            level="level"
            class="justify-content-between file-node"
            [class.d-none]="filterLeafNode(file, searchKey)">

            <!-- Button for opening file -->
            <div class="w-100 h-100 flex-nowrap align-items-center d-{{showRenameBox === file.node ? 'none' : 'flex'}}">

              <button
                class="w-100 file-button px-1 justify-content-start d-flex"
                mat-button
                (click)="openFile(file.node);currentSelection = 'file'">
                <mat-icon>insert_drive_file</mat-icon>{{file.name}}
              </button>

            </div>

            <!-- Name textbox for renaming files -->
            <span class="d-{{showRenameBox === file.node ? 'flex' : 'none'}} rename-box">
              <input
                type="text"
                [value]="file.name"
                class="w-100 ms-2"
                [id]="showRenameBox === file.node ? 'renameFile':''"
                #fileInput
                (keyup.enter)="renameFile({file: file.node, newName: fileInput?.value})"
                (keyup.esc)="showRenameBox = null">
            </span>

            <!-- Action buttons, for renaming and deleting files -->
            <div
              class="show-on-hover"
              *ngIf="showRenameBox === null">

              <button
                mat-icon-button
                color="primary"
                *ngIf="(file.node.path.endsWith('.html') || file.node.path.endsWith('.png') || file.node.path.endsWith('.jpeg') || file.node.path.endsWith('.jpg') || file.node.path.endsWith('.webp')) && file.node.path.startsWith('/etc/www/')"
                title="Preview file ..."
                (click)="previewHtmlFile(file.node)">
                <mat-icon>remove_red_eye</mat-icon>
              </button>

              <button
                mat-icon-button
                color="primary"
                title="Rename file ..."
                (click)="showRenameInput(file.node)">
                <mat-icon>edit</mat-icon>
              </button>

              <button
                mat-icon-button
                color="warn"
                title="Delete file ..."
                (click)="deleteFile(file.node.path)">
                <mat-icon>close</mat-icon>
              </button>

            </div>

          </mat-tree-node>

          <!-- Tree nodes for folders -->
          <mat-tree-node
            *matTreeNodeDef="let folder; when: isExpandable"
            [class.active-folder]="activeFolder === folder.node.path"
            [class.text-danger]="folder.node.systemFile"
            level="level"
            matTreeNodePadding
            matTreeNodePaddingIndent="10"
            [class.d-none]="filterParentNode(folder, searchKey)">

            <div class="w-100 h-100 flex-nowrap align-items-center d-{{showRenameBox === folder.node ? 'none' : 'flex'}}">

              <!-- Buttons for expanding and collapsing tree node -->
              <button
                mat-button
                class="px-1"
                matTreeNodeToggle
                [matTooltip]="folder.node.systemFile ? 'Do not modify unless you know what you\'re doing' : ''"
                matTooltipPosition="after">

                <mat-icon class="mat-icon-rtl-mirror">
                  {{treeControl.isExpanded(folder) ? 'expand_more' : 'chevron_right'}}
                </mat-icon>

                <mat-icon class="mat-icon-rtl-mirror">
                  {{treeControl.isExpanded(folder) ? 'folder_open' : 'folder'}}
                </mat-icon>

              </button>

              <!-- Button for selecting folder -->
              <button
                mat-button
                (click)="selectFolder(folder);treeControl.expand(folder);currentSelection = 'folder'"
                class="px-1 d-flex justify-content-start w-100 folder-btn">
                {{folder.name}}
              </button>

            </div>

            <!-- Name textbox for renaming folder -->
            <span class="d-{{showRenameBox === folder.node ? 'flex' : 'none'}} rename-box">
              <input
                type="text"
                [value]="folder.name"
                class="w-100 ms-2"
                [id]="showRenameBox === folder.node ? 'renameFile':''"
                #folderInput
                (keyup.enter)="renameFolder({folder: folder.node.path, newName: folderInput?.value})"
                (keyup.esc)="showRenameBox = null">
            </span>

            <!-- Action buttons for renaming and deleting folder -->
            <div class="show-on-hover" *ngIf="showRenameBox === null">

              <button
                mat-icon-button
                color="primary"
                (click)="showRenameInput(folder.node)">
                <mat-icon>edit</mat-icon>
              </button>

              <button
                mat-icon-button
                color="warn"
                (click)="deleteFolder(folder.node.path)">
                <mat-icon>close</mat-icon>
              </button>

            </div>
          </mat-tree-node>

        </mat-tree>

      </mat-expansion-panel>

    </mat-accordion>

  </div>

  <!-- Toolbox section -->
  <div class="max-height panel-2">

    <mat-accordion
      displayMode="flat">

      <mat-expansion-panel
        [expanded]="toolboxExpanded"
        class="mat-elevation-z0 toolbox">

        <mat-expansion-panel-header class="ps-0 pe-1">
          <mat-panel-title>
            <div class="d-flex w-100">
              <p class="my-0 fw-bold text-nowrap">Toolbox</p>
            </div>
          </mat-panel-title>
        </mat-expansion-panel-header>

        <div
          class="justify-content-between d-flex w-100 toolbox"
          [class.d-none]="filterToolbox(item, searchKey)"
          *ngFor="let item of workflowActions">

          <!-- Button for selecting workflow action -->
          <button
            mat-button
            [disabled]="!isHyperlambdaFile()"
            [matTooltip]="item.description"
            matTooltipPosition="right"
            (click)="insertAction(item)"
            class="justify-content-start d-flex w-100">
            <mat-icon>{{item.icon ?? 'grade'}}</mat-icon>
            {{item.name}}
          </button>

        </div>

        <hr>

        <div
          class="justify-content-between d-flex w-100 toolbox"
          [class.d-none]="filterToolbox(item, searchKey)"
          *ngFor="let item of workflowSnippets">

          <!-- Button for selecting workflow snippet -->
          <button
            mat-button
            [disabled]="!isHyperlambdaFile()"
            [matTooltip]="item.description"
            matTooltipPosition="right"
            (click)="insertSnippet(item)"
            class="justify-content-start d-flex w-100">
            {{item.name}}
          </button>

        </div>

      </mat-expansion-panel>
    </mat-accordion>

  </div>

  <!-- Currently open files section -->
  <div class="max-height panel-3">

    <mat-accordion
      displayMode="flat"
      multi>

      <mat-expansion-panel
        [expanded]="openFiles && openFiles.length > 0"
        class="mat-elevation-z0">

        <mat-expansion-panel-header class="ps-0 pe-1">
          <mat-panel-title>
            <div class="d-flex w-100">
              <p class="my-0 fw-bold text-nowrap">Open files</p>
            </div>
          </mat-panel-title>
        </mat-expansion-panel-header>

        <div
          class="justify-content-between d-flex w-100 open-files"
          *ngFor="let item of openFiles;let index=index"
          [id]="currentFileData.name === item.name ? 'active' : ''"
          [title]="item.path"
          (click)="openFile(item, false)"
          [class.active-file]="currentFileData.path === item.path">

          <!-- Button for selecting file, opening it for editing -->
          <button
            mat-button
            class="justify-content-start d-flex w-100">
            {{item.name}}
          </button>

          <!-- Button for closing file -->
          <button
            mat-icon-button
            (click)="closeFile(item.path)">
            <mat-icon>close</mat-icon>
          </button>

        </div>

      </mat-expansion-panel>
    </mat-accordion>

  </div>
</div>

<!-- Invisible helper input for allowing user to upload files -->
<input
  type="file"
  [(ngModel)]="fileInput"
  #file
  multiple
  class="d-none"
  (change)="uploadFiles($event.target.files)">

<input
  type="file"
  [(ngModel)]="zipFileInput"
  #zipfile
  class="d-none"
  accept=".zip"
  (change)="installModule($event.target.files)">

<div
  class="overlay"
  *ngIf="showRenameBox !== null"
  (click)="showRenameBox = null">
</div>
